<template>
  <!-- //!Vue3 中不必要有一个根节点，这种特性叫 Fragment -->
  <div>{{ msg }}</div>
  <button @click="changeMsg('Hello React')">click</button>
</template>
<script>
export default {
  beforeCreate() {
    console.log('beforeCreate')
  },
  /* data() {
    return {
      msg: 'xxx',
    }
  },
  methods: {}, */
  setup() {
    // !#1 执行时机比 beforeCreate 还要早
    console.log('setup')
    // !#2 setup 当中的 this 是 undefined，不能访问 data 或 methods 中的数据
    // console.log(this.msg)
    // !#3 Vue3 定义数据和方法都写到 setup 函数中
    const msg = 'Hello Vue3'
    const changeMsg = (msg) => console.log(msg)
    // !#4 如果想在模板中使用，必须通过 return 进行返回
    return {
      msg,
      changeMsg,
    }
  },
}
</script>
